<template>
  <div>
    <div>name:{{ myUser.name }} sex:{{ myUser.sex }} age:{{ myUser.age }}</div>
    <button type="button" @click="editUserInfo">修改用户的值</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

export interface Iuser {
  name: string
  sex: string
  age: number
}
// 响应式 Props 解构 3.5
const { user } = defineProps<{
  user: Iuser
}>()

const myUser = ref(user)

const editUserInfo = () => {
  myUser.value.age = 99
}
</script>

<style></style>
